<template>
  <div class="comments-container">
    <h3>留言管理</h3>
    <div class="content-container">
      <div class="content-left">
        <div class="title">全部动态</div>
        <ul
          v-loading="loadingDynamic"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
        >
          <li
            v-for="(item, index) in dynamicLists"
            :key="item.dynamic_id"
            :class="{active: dynamicCurrentIndex === index}"
            class="item-wrap"
            @click="getComments(item.dynamic_id,index)">
            <div class="title">
              {{ item.title }}
            </div>
            <div class="date-wrap">
              <div class="date">
                {{ item.update_time }}
              </div>
              <div class="amount">
                {{ item.comment_number }}条
              </div>
            </div>
          </li>
        </ul>
        <!--<div class="block">-->
        <!--<el-pagination-->
        <!--:current-page.sync="currentPage"-->
        <!--:page-size="100"-->
        <!--:pager-count="5"-->
        <!--:small="true"-->
        <!--layout="prev,next "-->
        <!--@current-change="handleCurrentChange"/>-->
        <!--</div>-->
      </div>
      <div class="content-right">
        <div class="filter-wrap">
          <div class="select-left">
            <el-select v-model="filterDate" style="margin-right: 20px;" placeholder="时间排序" @change="getCommentsOfDate">
              <el-option
                v-for="item in optionsDate"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="filterReply" placeholder="是否已回复" @change="getCommentsOfReply">
              <el-option
                v-for="item in optionsReply"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-button style="margin-left: 20px;" type="primary" size="small" @click="handleResetSearch">重置</el-button>
          </div>
          <div class="btn-right" v-show="dynamicIdNow">
            留言
            <el-switch
              v-model="isCommentsVisible"
              active-color="#2390FF"
              @change="commentIsshow"
            />
          </div>
        </div>
        <div class="comment-wrap">
          <div class="comment-title">
            <div class="messages">全部消息</div>
            <div class="operation">操作</div>
          </div>
          <div>
            <ul
              v-loading="loadingComments"
              element-loading-text="加载中"
              element-loading-spinner="el-icon-loading"
            >
              <li v-for="(item,index) in comments" :key="item.comment_id" class="item-wrap">
                <div class="comment-item">
                  <div class="avator">
                    <img :src="item.user_logo" alt="" width="100%" height="100%">
                  </div>
                  <div class="comment-content">
                    <div class="nick">
                      {{ item.user_nickname }}
                    </div>
                    <div class="content">
                      {{ item.content }}
                    </div>
                    <div class="date">
                      {{ item.create_time }}
                    </div>
                    <div v-show="item.replay_content" class="reply-content">
                      <span>我的回复： </span>{{ item.replay_content }}
                    </div>
                  </div>
                  <div class="comment-operation">
                    <span @click="handleTo(item.dynamic_id, item.comment_id, '0','顶')">置顶</span>
                    <span @click="handleTo(item.dynamic_id, item.comment_id, '2','底')">置底</span>
                    <span @click="handleReply(item.is_replay,index)">回复</span>
                  </div>
                </div>
                <el-collapse-transition>
                  <div v-show="currentIndex === index" class="reply-wrap">
                    <div class="title">回复该留言</div>
                    <div>
                      <el-input
                        v-model="commentText"
                        :autosize="{minRows: 8}"
                        resize="none"
                        maxlength="150"
                        type="textarea"
                        placeholder="请输入留言"
                        @change="handleText"/>
                      <div class="text-bottom">
                        <span>还可输入{{ 150- commentText.length }}字</span>
                      </div>
                    </div>
                    <div class="btn-bottom">
                      <el-button style="width:100px;" type="primary" @click="handleSend(item.dynamic_id,item.comment_id)">发送</el-button>
                      <el-button style="width:100px;" @click="handleCansel">取消</el-button>
                    </div>
                  </div>
                </el-collapse-transition>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import { commentHighLow, saveComment, getCommentList, commentIsShow } from '@/api/comment'
import { getServiceDynamicAllList } from '@/api/dynamic'

export default {
  data() {
    return {
      dynamicLists: [],
      dynamicIdNow: '',
      filterDate: '',
      optionsDate: [{
        value: '1',
        label: '倒序'
      },
      {
        value: '2',
        label: '正序'
      }],
      filterReply: '',
      optionsReply: [{
        value: '1',
        label: '已回复'
      },
      {
        value: '0',
        label: '未回复'
      }],
      comments: {},
      commentText: '',
      isCommentsVisible: null,
      currentPage: null,
      currentIndex: null,
      dynamicCurrentIndex: null,
      loadingDynamic: true,
      loadingComments: false

    }
  },
  created() {
    this.getServiceDynamic()
  },
  methods: {
    handleText() {
      const textLength = this.commentText.length
      if (textLength === 150) {
        this.$message({
          message: '点评字数不能超过150字',
          type: 'warning'
        })
      }
    },
    // 获取动态列表
    getServiceDynamic() {
      this.loadingDynamic = true
      getServiceDynamicAllList(2).then(response => {
        if (response.status === 200) {
          response.data.data.forEach(item => {
            item.update_time = this._filterDate(item.update_time)
          })
          this.dynamicLists = response.data.data
          this.loadingDynamic = false
        }
      })
    },
    // 获取动态留言
    getComments(id, index) {
      this.dynamicCurrentIndex = index
      this.dynamicIdNow = id
      const data = {
        dynamic_id: this.dynamicIdNow
      }
      this._getCommentList(data)
      this.filterDate = ''
      this.filterReply = ''
      this.currentIndex = null
    },
    // 留言时间排序
    getCommentsOfDate() {
      const data = {
        dynamic_id: this.dynamicIdNow,
        sort: this.filterDate
      }
      this._getCommentList(data)
    },
    // 留言回复筛选
    getCommentsOfReply() {
      const data = {
        dynamic_id: this.dynamicIdNow,
        is_replay: this.filterReply
      }
      this._getCommentList(data)
    },
    // 重置筛选
    handleResetSearch() {
      this.filterDate = null
      this.filterReply = null
      const data = {
        dynamic_id: this.dynamicIdNow
      }
      this._getCommentList(data)
    },
    // 留言是否显示
    commentIsshow() {
      const data = {
        dynamic_id: this.dynamicIdNow,
        comment_isshow: this.isCommentsVisible ? '0' : '1'
      }
      if (data.comment_isshow === '0') {
        commentIsShow(data).then(res => {
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: '动态可留言'
            })
          } else {
            this.$message({
              type: 'danger',
              message: res.message
            })
          }
        })
      } else {
        commentIsShow(data).then(res => {
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: '动态不可留言'
            })
          } else {
            this.$message({
              type: 'danger',
              message: res.message
            })
          }
        })
      }
    },
    // 获取留言数据
    _getCommentList(data) {
      this.loadingComments = true
      getCommentList(data).then(response => {
        if (response.status === 200) {
          this.isCommentsVisible = response.comment_isshow === '0'
          response.data.forEach(item => {
            item.create_time = this._filterDate(item.create_time)
            item.dynamic_id = data.dynamic_id
          })
          this.comments = response.data
          this.loadingComments = false
        }
      })
    },
    // 时间戳转时间函数
    _filterDate(time) {
      const date = new Date(time * 1000)// 时间戳11位需乘以1000
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return (Y + M + D + h + m + s)
    },
    handleTo(dynamic_id, comment_id, hight_low, to) {
      const data = {
        comment_id: comment_id,
        dynamic_id: dynamic_id,
        hight_low: hight_low
      }
      commentHighLow(data).then(res => {
        if (res.status === 200) {
          this.getComments(this.dynamicIdNow)
          this.$message({
            type: 'success',
            message: `评论置${to}成功`
          })
        } else {
          this.$message({
            type: 'danger',
            message: res.message
          })
        }
      })
    },
    handleReply(isReply, index) {
      if (isReply === '0') {
        this.currentIndex = index
      } else {
        this.$message({
          type: 'warning',
          message: '每条评论只能回复一次'
        })
      }
    },
    handleCansel() {
      this.currentIndex = null
      this.commentText = ''
    },
    handleSend(dynamic_id, comment_id) {
      const data = {
        comment_id: comment_id,
        dynamic_id: dynamic_id,
        content: this.commentText
      }
      this.saveComment(data)
    },
    saveComment(data) {
      saveComment(data).then(res => {
        if (res.status === 200) {
          this.$message({
            type: 'success',
            message: '回复成功'
          })
          const newdata = {
            dynamic_id: this.dynamicIdNow
          }
          this._getCommentList(newdata)
          this.currentIndex = null
          this.commentText = ''
        } else {
          this.$message({
            type: 'danger',
            message: res.message
          })
        }
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style rel="stylesheet" lang="scss">
  // element-ui样式覆盖
  .comments-container .el-textarea__inner {
    border-radius: 0;
  }
  .comments-container .el-textarea__inner:focus {
    border-color: #E4E4E4;
  }
</style>
<style rel="stylesheet" lang="scss" scoped>
  .comments-container {
    padding: 30px;
    font-family: MicrosoftYaHei;
  }

  .content-container {
    background-color: #fff;
    min-height: 600px;
    padding: 40px 30px;
    display: flex;
  }

  .content-left {
    width: 241px;
    padding-bottom: 20px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(228, 228, 228, 1);
    > .title {
      padding: 22px 20px;
      font-size: 14px;
      color: rgba(102, 102, 102, 1);
      line-height: 14px;
      border-bottom: 1px solid rgba(228, 228, 228, 1);
    }
    .item-wrap {
      padding: 12px 20px;
      border-bottom: 1px solid rgba(228, 228, 228, 1);
      .title {
        font-size: 14px;
        color: rgba(51, 51, 51, 1);
        line-height: 24px;
        text-align: justify;
      }
    }

    .date-wrap {
      display: flex;
      justify-content: space-between;
      margin-top: 18px;
      .date {
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
        line-height: 16px;
      }
      .amount {
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
        line-height: 16px;
      }
    }
  }

  .content-right {
    overflow-y: scroll;
    height: 800px;
    flex-grow: 1;
    padding: 24px 30px;
    border: 1px solid rgba(228, 228, 228, 1);
    border-left: none;
  }

  .filter-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-right {

    }
  }

  .comment-wrap {
    .comment-title {
      display: flex;
      margin-top: 24px;
      justify-content: space-between;
      padding: 18px 30px;
      background: rgba(242, 242, 242, 1);
      border: 1px solid rgba(228, 228, 228, 1);
      .messages {
        flex-grow: 1;
        font-size: 14px;
        color: rgba(102, 102, 102, 1);
        line-height: 14px;
      }
      .operation {
        width: 180px;
        padding-left: 10px;
        flex-shrink: 0;
        font-size: 14px;
        color: rgba(102, 102, 102, 1);
        line-height: 14px;
      }
    }
    .item-wrap {
      border-bottom: 1px solid rgba(228, 228, 228, 1);
    }
    .comment-item {
      padding: 20px 30px 20px 30px;
      display: flex;
      &:hover {
        background: rgba(242, 242, 242, 1);
        .comment-operation {
          visibility: visible;
        }
      }
      .avator {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 22px;
        overflow: hidden;
      }
      .comment-content {
        flex-grow: 1;
        margin-left: 20px;
        .nick {
          font-size: 14px;
          color: rgba(51, 51, 51, 1);
          line-height: 19px;
        }
        .content {
          margin-top: 4px;
          padding-right: 60px;
          text-align: justify;
          font-size: 12px;
          color: rgba(102, 102, 102, 1);
          line-height: 22px;
        }
        .reply-content {
          margin-top: 24px;
          padding-top: 20px;
          margin-right: 60px;
          text-align: justify;
          font-size: 12px;
          border-top: 1px solid #e4e4e4;
          color: rgba(102, 102, 102, 1);
          line-height: 22px;
        }
        .date {
          margin-top: 10px;
          font-size: 12px;
          color: rgba(153, 153, 153, 1);
          line-height: 16px;
        }
      }
      .comment-operation {
        visibility: hidden;
        align-self: center;
        padding-left: 10px;
        width: 180px;
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(102, 102, 102, 1);
        line-height: 12px;
        > span {
          margin-right: 30px;
          cursor: pointer
        }
      }

    }
    .reply-wrap {
      margin-left: 94px;
      padding-top: 10px;
      .title {
        padding-bottom: 14px;
        font-size: 14px;
        color: rgba(51, 51, 51, 1);
        line-height: 19px;
      }
      .text-bottom {
        border: 1px solid rgba(228, 228, 228, 1);
        border-top: none;
        padding: 12px 20px;
        text-align: right;
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
        line-height: 16px;
      }
      .btn-bottom {
        margin-top: 20px;
        margin-bottom: 20px;
      }
    }
  }

  .active {
    background: rgba(242, 242, 242, 1);
  }
</style>
